<template>
    <div class="accountSecurity">
        <div class="title">
            <span>账号安全：</span>
        </div>
        <div class="content">
            <p>绑定后可作为账号登录及找回密码</p>
            <ul class="binding_list">
                <li class="list clerFix">
                    <el-dialog width="600px" title="绑定手机号" :visible.sync="dialogTableVisible">
                        <div class="popup_content">
                            <p>绑定后可作为账号登录，还可以找回密码</p>
                            <el-form ref="form" :model="phone" label-width="100px">
                                <el-form-item label="手机号：">
                                    <el-input v-model="phone.phoneNumber" placeholder="请输入手机号" style="width: 400px;">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="验证码：">
                                    <el-input v-model="phone.phoneNumber" placeholder="请输入右边验证码" style="width: 268px;">
                                    </el-input>
                                    <div class="code"><SIdentify :handleCanvasCode="handleCanvasCode" :width="112" :height="40"></SIdentify></div>
                                    <div style="clear: both;"></div>
                                </el-form-item>
                                <el-form-item label="短信验证码：">
                                    <el-input v-model="phone.phoneNumber" placeholder="请输入短信验证码" style="width: 268px;">
                                    </el-input>
                                    <el-button style="margin-left: 20px;">获取验证码</el-button>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" plain>绑定</el-button>
                                    <el-button style="margin-left: 20px;" @click="dialogTableVisible=false">取消
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-dialog>
                    <div class="BangDing">
                        <span class="BangdingTitle">手机号：</span>
                        <span>{{loadBindInfoP.phone}}</span>
                    </div>

                    <el-button type="primary" style="float:right;" @click="dialogTableVisible=true" v-if="false">绑定手机号</el-button>
                    <el-button type="primary" style="float:right;" @click="dialogTableVisible=true" v-if="false">修改手机号
                    </el-button>
                </li>
                <!-- 绑定邮箱 -->
                <li class="list clerFix">
                    <el-dialog width="400px" title="绑定邮箱" :visible.sync="mailbox">
                        <div class="popup_content">
                            <p>绑定后可作为账号登录，还可以找回密码</p>
                            <el-form ref="form" label-width="100px">
                                <el-form-item label="邮箱：">
                                    <el-input v-model="Email" placeholder="请输入邮箱" style="width: 200px;"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" plain @click="bindEmail">绑定</el-button>
                                    <el-button style="margin-left: 20px;" @click="mailbox=false">取消</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-dialog>
                    <div class="BangDing">
                        <span class="BangdingTitle">邮箱:</span>
                        <span>{{loadBindInfoP.email?loadBindInfoP.email:'您还未绑定邮箱'}}</span>
                    </div>
                    <el-button type="primary" style="float:right; width: 112px;" @click="mailbox=true" 
                    v-if="loadBindInfoP.email">修改邮箱
                    </el-button>
                    <el-button v-else
                    type="primary" style="float:right; width: 112px;" @click="mailbox=true" :disabled="bindEmailCache">
                        {{bindEmailCache?'待验证':'绑定邮箱'}}</el-button>
                </li>
                <li class="list clerFix">
                    <el-dialog width="600px" title="绑定身份证" :visible.sync="SFZID">
                        <div class="popup_content">
                            <p>绑定后可作为账号登录，还可以找回密码</p>
                            <el-form ref="form" label-width="100px">
                                <el-form-item label="身份证：">
                                    <el-input v-model="identity" placeholder="请输入身份证号" style="width: 400px;"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" plain>绑定</el-button>
                                    <el-button style="margin-left: 20px;" @click="SFZID=false">取消</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-dialog>
                    <div class="BangDing">
                        <span class="BangdingTitle">身份证:</span>
                        <span>{{loadBindInfoP.idNumber}}</span>
                    </div>
                    <el-button type="primary" style="float:right;" @click="SFZID=true" v-if="false">绑定身份证</el-button>
                    <el-button type="primary" style="float:right;" @click="SFZID=true" v-if="false">修改身份证</el-button>
                </li>
                <!-- <li class="list">
                    <el-dialog width="600px" title="设置密保问题" :visible.sync="protection">
                        <div class="popup_content">
                            <p>为了避免遗忘，请填写真实信息，登录密码可以通过密保问题快速找回</p>
                            <el-form ref="form" label-width="100px">
                                <el-form-item label="完全问题一：">
                                    <el-select filterable v-model="Protect.one" placeholder="请选择活动区域" @blur="selectBlur"
                                        style="width: 400px;">
                                        <el-option label="区域一" value="shanghai"></el-option>
                                        <el-option label="区域二" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="答案：">
                                    <el-input v-model="answer" placeholder="请输入答案" style="width: 400px;"></el-input>
                                </el-form-item>
                                <el-form-item label="完全问题二：">
                                    <el-select filterable v-model="Protect.one" placeholder="请选择活动区域" @blur="selectBlur"
                                        style="width: 400px;">
                                        <el-option label="区域一" value="shanghai"></el-option>
                                        <el-option label="区域二" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="答案：">
                                    <el-input v-model="answer" placeholder="请输入答案" style="width: 400px;"></el-input>
                                </el-form-item>
                                <el-form-item label="完全问题三：">
                                    <el-select filterable v-model="Protect.one" placeholder="请选择活动区域" @blur="selectBlur"
                                        style="width: 400px;">
                                        <el-option label="区域一" value="shanghai"></el-option>
                                        <el-option label="区域二" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="答案：">
                                    <el-input v-model="answer" placeholder="请输入答案" style="width: 400px;"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" plain>确认</el-button>
                                    <el-button style="margin-left: 20px;" @click="protection=false">取消</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-dialog>
                    <el-button type="text" @click="protection=true">设置密保问题</el-button>
                </li> -->
            </ul>
        </div>
    </div>
</template>

<script>
    import SIdentify from '@c/sidentify/sidentify'
    export default {
        components:{
            SIdentify
        },
        created() {
            this.getList()
        },
        data() {
            return {
                bindEmailCache: false,
                loadBindInfoP: {},
                phone: {
                    phoneNumber: ''
                },
                Protect: {
                    one: ''
                },
                Email: '',
                identity: '',
                answer: '',
                dialogTableVisible: false,
                mailbox: false,
                protection: false,
                SFZID: false,
                canvasCode:''
            }

        },
        methods: {
            bindEmail(){
                this.$store.dispatch('homeModule/bindEmail',{
                    email: this.Email
                }).then(res => {
                    if(res){
                        this.bindEmailCache = true
                        this.mailbox = false
                        this.$message.success('绑定信息已发送到你的邮箱，请前往验证.')
                        this.getList()
                    }
                })
            },
            getList(){
                this.$store.dispatch('homeModule/loadBindInfo').then(res => {
                    if(res){
                        this.loadBindInfoP = res
                    }
                })
            },
            selectBlur(e) {
                this.Protect.one = e.target.value
            },
            handleCanvasCode(value){
                this.canvasCode = value
            }
        },
    }
</script>

<style lang="scss" scoped>
    .accountSecurity {
        width: 100%;

        .title {
            text-align: left;
            border-bottom: 1px solid #DCDFE6;
            box-sizing: border-box;
            padding-bottom: 10px;
        }

        .content {
            box-sizing: border-box;
            padding-top: 10px;
            color: #606266;
            font-size: 14px;

            .binding_list {
                list-style-type: none;
                box-sizing: border-box;
                padding: 10px 0;

                .list {
                    text-align: left;
                    box-sizing: border-box;
                    padding: 4px 20px;
                    border: 1px solid #DCDFE6;
                    margin-bottom: 10px;

                    .BangDing {
                        float: left;
                        margin-top: 12px;

                        .BangdingTitle {
                            margin-right: 10px;
                        }
                    }
                }

                .list:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }

    .popup_content {
        p {
            text-align: center;
        }

        .code {
            float: right;
            width: 112px;
            height: 40px;
            /*background-color:red;*/
            border: 1px solid #DCDFE6;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 60px;
        }
    }

    .clerFix::after {
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }
</style>